<template>
	<scroll-view scroll-y="true" class="scroll-Y" >
		<view class="scroll-view-item" v-for="(item, index) in list" :key="index" @click="toVidoInfo(item)">
			<view class="gs" :style="'background-image: url('+item.cover_img+')'"></view>
			<image mode="widthFix" :src="item.cover_img" alt="" lazy-load :lazy-load-margin="0">
			<view class="content">
				<view class="title">{{item.name}}</view>
				<view class="update">更新至{{item.number_of_sets}}集</view>
				<view class="brief van-multi-ellipsis--l3" v-if="item.synopsis">简介:{{item.synopsis}}</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		getRecommendList
	} from '../../../module/index.js'
	const app = getApp()
	export default {
		data(){
			return{
				list:null
			}
		},
		methods:{
			getlist(){
				getRecommendList().then((res) => {
					if (res.code === 200) {
						this.list = res.data.slice(0,20)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			toVidoInfo(item){
				if (uni.getStorageSync('is_online')) {
					uni.navigateTo({
						url: "/wxcomponents/yjy-video-slide/yjy-video-slide?video_id=" + (item.id) +
							'&video_detail_id=' + (item.video_type_id)
					});
				}
			}
		},
		onLoad(e){
			uni.setStorageSync('login_message', {
				official_account_id:e?.official_account_id,
				uid:e?.uid,
				video_id:e?.video_id
			})
		},
		onShow() {
			this.getlist()
		},
	}
</script>

<style scoped lang="scss">
	scroll-view{
		padding:30rpx;
		box-sizing: border-box;
		position: relative;
	}
	.scroll-view-item{
		padding:40rpx 30rpx;
		display: flex;
		border-radius: 10px;
		margin-bottom: 20rpx;
		background-color: rgba(0,0,0,0.5);
		overflow: hidden;
		position: relative;
		image{
			width: 250rpx;
			margin-right: 25rpx;
			border-radius: 5px;
		}
		.content{
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex:1;
			line-height: 40rpx;
			color:#ffffff;
			.title{
				font-size: 40rpx;
				font-weight: bold;
			}
			.update{
				font-size: 24rpx;
				color:#d0c8c8;
				margin:6rpx 0;
			}
			.brief{
				font-size: 24rpx;
				-webkit-line-clamp: 6;
			}
		}
		&:last-child{
			margin-bottom: 0;
		}
		.gs{
			background-size: cover;
			position: absolute;
			top:50%;
			left:50%;
			width: 90%;
			height: 90%;
			transform: translate(-50%,-50%);
			filter:blur(15px);
			z-index:-1;
			border-radius: 45px;
			overflow: hidden;
		}
	}
</style>
